<template>
  <el-form class="login-form"
           status-icon
           :rules="loginRules"
           ref="loginFormRef"
           :model="loginForm"
           label-width="0">
    <el-form-item v-if="tenantMode" prop="tenantId">
      <el-input size="small" @keyup.enter="handleLogin"
                v-model="loginForm.tenantId"
                auto-complete="off">
        <template v-slot:prefix>
          <i class="icon-quanxian"></i>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="username">
      <el-input @keyup.enter="handleLogin"
                v-model="loginForm.username"
                auto-complete="off"
                :placeholder="$t('login.username')">
        <template v-slot:prefix>
          <i class="icon-yonghu"></i>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input size="small" @keyup.enter="handleLogin"
                :type="passwordType"
                show-password
                v-model="loginForm.password"
                auto-complete="off"
                :placeholder="$t('login.password')">
        <template v-slot:suffix>
          <i class="el-icon-view el-input__icon" @click="showPassword"></i>
        </template>
        <template v-slot:prefix>
          <i class="icon-mima"></i>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item v-if="captchaMode" prop="code">
      <el-row :span="24">
        <el-col :span="16">
          <el-input size="small" @keyup.enter="handleLogin"
                    :maxlength="4"
                    v-model="loginForm.code"
                    auto-complete="off"
                    :placeholder="$t('login.code')">
            <template v-slot:prefix>
              <i class="icon-yanzhengma"></i>
            </template>
          </el-input>
        </el-col>
        <el-col :span="8">
          <div>
            <img :src="loginForm.image" class="login-code" @click="refreshCode"/>
          </div>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small"
                 @click.prevent="handleLogin"
                 class="login-submit">{{ $t('login.submit')}}
      </el-button>
    </el-form-item>
  </el-form>
</template>


<script setup>
import website from "/src/config/website.js";
import {useNavsStore} from "/src/store/modules/tags.js";
import {authApi} from "/src/api/auth.js";
import {useUserStore} from "/src/store/modules/user.js";
import {useRouter, useRoute} from 'vue-router'
import {ElLoading} from 'element-plus'

defineOptions({
  name: "userlogin",
})

const optionsData = reactive({
  tenantMode: website.tenantMode,
  captchaMode: website.captchaMode,
  loginForm: {
    //租户ID
    tenantId: "439674",
    //用户名
    username: "admin",
    //密码
    password: "admin@123",
    //账户类型
    type: "account",
    //验证码的值
    code: "",
    //验证码的值
    deviceId: "28C6D2CB-9119-43DC-B720-0306FD4662A0",
    //验证码的索引
    key: "",
    //预加载白色背景
    image: "",
  },
  checked: false,
  loginRules: {
    tenantId: [
      {required: false, message: "请输入租户ID", trigger: "blur"}
    ],
    username: [
      {required: true, message: "请输入用户名", trigger: "blur"}
    ],
    password: [
      {required: true, message: "请输入密码", trigger: "blur"},
      {min: 6, message: "密码长度最少为6位", trigger: "blur"}
    ],
  },
  passwordType: "password"
})

const {tenantMode, captchaMode, loginForm, checked, loginRules, passwordType} = toRefs(optionsData)

onMounted(() => {
  refreshCode();
})

const tagWelComputed = computed(() => {
  const navStore = useNavsStore()
  return navStore.tagWel
})

function refreshCode() {
  authApi.getCaptcha().then(res => {
    const data = res.data.data;
    optionsData.loginForm.key = data.key;
    optionsData.loginForm.image = data.image;
  })
}

function showPassword() {
  optionsData.passwordType === ""
      ? (optionsData.passwordType = "password")
      : (optionsData.passwordType = "");
}


const router = useRouter()
const route = useRoute()
const loginFormRef = ref()

function handleLogin() {
  loginFormRef.value.validate(valid => {
    if (valid) {
      const loading = ElLoading.service({
        lock: true,
        text: '登录中,请稍后。。。',
        spinner: "el-icon-loading"
      });
      const userStore = useUserStore()
      userStore.LoginByUsername(optionsData.loginForm).then(() => {
        console.log("LoginByUsername")
        const userStore = useUserStore()
        userStore.GetCurrentUserInfo().then(() => {
          router.push({path: tagWelComputed.value.value});
        })
        loading.close();
      }).catch(() => {
        loading.close()
      });
    }
  });
}

// function getTenant() {
//   let domain = getTopUrl();
//   // 临时指定域名，方便测试
//   //domain = "https://bladex.vip";
//   info(domain).then(res => {
//     const data = res.data;
//     if (data.success && data.data.tenantId) {
//       this.tenantMode = false;
//       this.loginForm.tenantId = data.data.tenantId;
//     }
//   })
// }
</script>

<style>
</style>
